클로드 코드 완벽 가이드 — 15장 클로드로 아이디어 구체화하기 딥다이브 학습 노트

출처: 클로드 코드 완벽 가이드 (코드팩토리 최지호) | 참고: https://github.com/codefactory-co

15장에서 다루는 내용

• Playwright MCP 설정 — 클로드 데스크톱에서 브라우저 자동화 도구 연동하기
• Playwright로 정보 크롤링 — 참고 사이트 분석으로 콘텍스트 수집하기
• 빠르게 디자인 이터레이션하기 — ASCII 레이아웃으로 UI를 빠르게 검증하기
• PRD 작성 — 대화 기반으로 정교한 제품 요구사항 문서 자동 생성하기

전체 흐름도

[아이디어 구체화 파이프라인]

+------------------+     +----------------------+     +--------------------+
| 1. Playwright    |     | 2. 정보 크롤링       |     | 3. 디자인           |
|    MCP 설정       | --> |    & 사이트 분석      | --> |    이터레이션       |
|                  |     |                      |     |                    |
| - 클로드 데스크톱 |     | - 참고 사이트 탐색   |     | - ASCII 카드 UI    |
|   설정 > 개발자   |     |   (nomads.com)       |     | - ASCII 홈페이지   |
| - config.json    |     | - 사업 모델 분석     |     | - 수정 요청으로    |
|   편집           |     | - UI/UX 분석         |     |   레이아웃 확정    |
| - Node.js 설치   |     | - 기능 벤치마킹      |     |                    |
| - npm 패키지     |     |                      |     |                    |
+------------------+     +----------------------+     +--------------------+
                                                              |
                                                              v
                                                      +--------------------+
                                                      | 4. PRD 작성        |
                                                      |                    |
                                                      | - 문제 정의        |
                                                      | - 타겟 사용자      |
                                                      | - 제안 해결책      |
                                                      | - 기능 범위        |
                                                      | - 기술 스택        |
                                                      +--------------------+

선수 지식 체크리스트

• [ ] 클로드 데스크톱 앱 기본 사용법
• [ ] MCP(Model Context Protocol) 개념 이해
• [ ] Node.js / npm 기본 설치 및 사용
• [ ] PRD(Product Requirements Document)가 무엇인지 기본 이해

핵심 키워드

섹션 1: Playwright MCP 설정

한 줄 요약

클로드 데스크톱에 Playwright MCP를 설치하면 클로드가 브라우저를 직접 조작하여 웹사이트를 탐색하고 정보를 수집할 수 있다.

쉬운 설명 (비유)

Playwright MCP는 클로드에게 "눈"을 달아주는 것과 같다.

기존 클로드: 학습된 지식만으로 대답 (책만 읽은 학생)
Playwright 연결 후: 직접 웹사이트에 방문해서 최신 정보를 가져옴 (인터넷 검색 가능한 학생)

비유하면:
- 기존 = 도서관에만 있는 사서 -> 책에 있는 정보만 알려줄 수 있음
- Playwright 연결 = 직접 현장 방문도 가능한 기자 -> 현재 상황을 직접 확인

실무 예제: Playwright MCP 설정 절차

Step 01: 클로드 데스크톱 실행 -> 상태바에서 [설정] 클릭
Step 02: [개발자] 선택 -> [설정 편집] 버튼 클릭
         -> 탐색기가 실행되어 claude_desktop_config.json 위치로 이동
Step 03: VS Code 등에서 config.json 열고 아래 내용 입력:

{
    "mcpServers": {
        "playwright": {
            "command": "npx",
            "args": [
                "@playwright/mcp@latest"
            ]
        }
    }
}

Step 04: Node.js 설치 (nodejs.org/ko/download)
         터미널에서: npm i -g playwright-mcp

Step 05: 클로드 데스크톱 재시작 -> 새 채팅 생성
         -> 도구 목록에 playwright 옵션이 보이면 설정 성공!
         -> playwright 도구의 모든 기능을 허가

Step 06: 테스트 -- "Playwright로 구글에서 코드팩토리 검색해줘"
         -> 브라우저가 자동으로 열리고 검색 실행됨

Playwright MCP가 제공하는 주요 도구

설정 전: 클로드가 웹사이트 접근 불가
설정 후: 아래 도구들이 활성화됨

- playwright_navigate   : 특정 URL로 이동
- playwright_screenshot : 현재 화면 캡처
- playwright_click      : 버튼/링크 클릭
- browser_navigate      : 브라우저 네비게이션
- browser_type          : 텍스트 입력
- start_codegen_session : 코드 생성 세션 시작
- end_codegen_session   : 코드 생성 세션 종료
- get_codegen_session   : 세션 정보 조회
- clear_codegen_session : 세션 초기화

핵심 체크포인트

• 클로드 데스크톱과 클로드 코드(에이전트)는 용도에 따라 나눠 쓰는 것이 좋다
• 프로젝트 코드 수정은 클로드 코드, 아이디어 정리/PRD 작성은 클로드 데스크톱이 적합
• claude_desktop_config.json에 MCP 서버 설정을 JSON으로 작성
• Node.js가 반드시 설치되어 있어야 npx 명령어가 동작
• 클로드가 권한 요청 시 [항상 허용]을 눌러야 도구가 정상 작동

섹션 2: Playwright로 정보 크롤링하기

한 줄 요약

Playwright MCP를 사용하여 참고 사이트(nomads.com)를 자동으로 분석하고 사업 모델, UI/UX, 핵심 기능 등의 상세한 보고서를 생성한다.

쉬운 설명 (비유)

Playwright 크롤링은 "건축가가 다른 건물을 답사하는 것"과 같다.

건축가가 멋진 건물을 짓고 싶을 때:
1. 먼저 비슷한 건물들을 직접 방문한다
2. 외관, 내부 구조, 동선 등을 꼼꼼히 관찰한다
3. 잘 된 점과 아쉬운 점을 메모한다
4. 이 참고 자료를 바탕으로 자신만의 설계를 시작한다

마찬가지로 서비스를 만들기 전에:
클로드에게 -> Playwright로 참고 사이트를 방문시키고
-> 사업 모델, UI 구조, 기능 등을 분석하게 하면
-> 질 높은 콘텍스트를 확보하여 더 나은 기획이 가능

실무 예제: 노마드 리스트 분석

프롬프트 예시:
"너는 이제부터 사업 모델과 UI를 파악하는 전문가야.
 Playwright를 사용해서 https://nomads.com/ 사이트를 분석해줘."

클로드의 동작:
1. Playwright로 nomads.com에 자동 접속
2. 버튼을 클릭하고 HTML 구조를 탐색
3. 스크린샷을 찍어 분석
4. 아래와 같은 보고서를 자동 생성:

+-------------------------------------+
|  Nomads.com 사업 모델 및 UI 분석     |
|                                     |
|  사업 모델 분석                      |
|  1. 비즈니스 모델                    |
|    - 프리미엄 구독 (멤버십 기반)     |
|    - 커뮤니티 (37,765명 멤버)       |
|    - 데이터 기반 플랫폼             |
|  2. 수익원 구조                      |
|    - 멤버십 수수료                   |
|    - 제휴 마케팅                     |
|                                     |
|  UI/UX 분석                         |
|  핵심 기능 분석                      |
|  타겟 사용자 분석                    |
|  혁신적 특징                         |
|  경쟁 우위                           |
|  성장 전략 분석                      |
+-------------------------------------+

크롤링 결과를 콘텍스트로 활용하기

나쁜 방법: 크롤링 결과를 무시하고 새 채팅에서 처음부터 기획
좋은 방법: 같은 채팅에서 대화를 이어가며 크롤링 결과를 참조

이유: 클로드의 콘텍스트 창에 분석 결과가 남아 있으므로
      이후 기획, UI 디자인, PRD 작성 시 자동으로 참고함

핵심 체크포인트

• 콘텍스트가 섞이지 않도록 별도의 채팅에서 크롤링을 실행
• Playwright가 자동으로 버튼 클릭, HTML 탐색, 스크린샷 촬영을 수행
• 사업 모델, UI/UX, 핵심 기능, 타겟 사용자, 경쟁 우위, 성장 전략 등 10가지 요소 분석 가능
• 크롤링 보고서는 같은 채팅에서 후속 기획의 중요한 콘텍스트 자료로 활용

섹션 3: 빠르게 디자인 이터레이션하기

한 줄 요약

실제 코드를 작성하기 전에 ASCII 코드로 UI 레이아웃을 빠르게 만들고, 수정 요청으로 이터레이션하며 최종 디자인을 확정한다.

쉬운 설명 (비유)

ASCII 레이아웃은 "건물 짓기 전 종이에 간단히 그리는 스케치"와 같다.

건물을 바로 짓기 시작하면?
-> 마음에 안 들면 다시 부수고 지어야 함 (비용 낭비)

종이에 먼저 스케치하면?
-> "이 벽 여기로 옮겨주세요" 한마디로 수정 가능 (빠르고 저렴)

마찬가지로:
- 바로 HTML/CSS 코드로 UI 구현 -> 수정할 때마다 코드 재작성 (시간 낭비)
- ASCII로 레이아웃 먼저 확인 -> 텍스트 수준에서 빠르게 이터레이션

실무 예제: K-노마드 리스트 UI 디자인

[Step 1] 도시 카드 UI부터 요청

프롬프트: "도시 카드 UI를 ASCII 코드로 제작해줘"

결과 예시:
+-----------------------------------------------+
|                   서울                         |
|            글로벌 메가시티                      |
|                                               |
|  노마드 점수: 4.06/5.0   월 예상비용: 180만원   |
|                                               |
|  핵심 지표                                     |
|  생활비     |***  |  인터넷 속도 |*****|        |
|  음식 & 문화|*****|  교통 접근성 |*****|        |
|  업무 환경  |*****|  안전도     |**** |        |
|  영어 친화도|***  |  커뮤니티   |**** |        |
|                                               |
|  추천 지역: 강남 . 홍대 . 성수동 . 을지로       |
+-----------------------------------------------+

-> 마음에 들지 않는 부분은 수정 요청으로 이터레이션


[Step 2] 전체 홈페이지 레이아웃 요청

프롬프트: "홈페이지 UI를 ASCII 코드로 디자인해줘"

결과 예시:
+================================================+
|              K-NOMAD HUB                       |
|         대한민국 디지털 노마드 도시 가이드        |
|                                                |
| 홈 | 도시탐색 | 비교하기 | 커뮤니티              |
| 리뷰 | 가이드 | 검색: [________]                 |
|                                                |
|  예산: [100만원 이하]  지역: [전체]              |
|  환경: [코워킹 필수]   계절: [봄]               |
|            [도시 찾기 버튼]                      |
+================================================+

-> 배너부터 푸터까지 전체 디자인을 확인
-> 마음에 들지 않는 부분만 수정 요청

이터레이션의 핵심 원칙

1. 작은 단위부터 시작
   - 전체 페이지가 아닌 카드 하나부터 디자인
   - 카드가 확정되면 전체 레이아웃으로 확장

2. 빠른 피드백 루프
   - ASCII 레이아웃 확인 -> 수정 요청 -> 재생성 -> 반복
   - 코드 작성 전에 레이아웃을 확정하면 시간 절약

3. 점진적 확장
   도시 카드 -> 홈페이지 -> 상세 페이지 -> 전체 사이트

핵심 체크포인트

• UI 디자인 갈등은 ASCII 레이아웃을 먼저 요청하면 빠르게 해결됨
• 작은 컴포넌트(카드)부터 시작해서 전체 페이지로 확장하는 것이 효율적
• 수정을 원하면 텍스트 수준에서 이터레이션 -- 코드 작성보다 훨씬 빠름
• 최종 확정된 ASCII 레이아웃은 이후 실제 UI 구현의 청사진 역할

섹션 4: PRD 작성

한 줄 요약

단순한 한 줄 아이디어로 시작해 클로드와 대화하며 콘텍스트를 쌓으면, 문제 정의/타겟 사용자/기술 스택까지 포함한 정교한 PRD를 자동으로 생성할 수 있다.

쉬운 설명 (비유)

전통적 PRD 작성 vs 클로드 활용 PRD 작성

전통적 방식 (폭포수):
기획서 작성 (3일) -> 검토 (2일) -> 수정 (2일) -> 개발 시작
-> 중간에 기획 변경되면 처음부터 다시 (시간/예산 낭비)

클로드 활용 방식:
"이런 서비스 만들고 싶어" (1분)
-> Playwright로 참고 사이트 분석 (자동)
-> 아이디어 구체화 대화 (30분)
-> ASCII 레이아웃으로 UI 검증 (10분)
-> PRD 자동 생성 (5분)
-> 바로 개발 시작!

비유하면:
전통적 = 백과사전을 처음부터 끝까지 혼자 쓰는 것
클로드 활용 = 전문 비서와 대화하며 핵심만 정리하는 것

실무 예제: K-노마드 리스트 PRD 작성

프롬프트:
"너는 지금부터 PRD 작성 전문가인 프로덕트 매니저야.
 지금까지의 대화를 기반으로 아래 요소를 포함한 PRD를 작성해줘.

 # 문제 정의
 한국에서 디지털 노마드로 생활하고 싶은 사람들에게 정리된
 정보를 제공하는 사이트가 현재 없어. 그들이 도시별 생활 조건을
 쉽게 찾을 수 있는 사이트를 만들려고 해.

 # 타겟 사용자
 디지털 노마드로 살고 싶은 사람들을 타게팅할 거야.

 # 제안 해결책
 우리가 지금까지 대화한 기획과 UI 레이아웃을 기반으로..."

결과물에 포함되는 항목:
+----------------------------------+
|  K-노마드 허브 PRD                |
|                                  |
|  1. 문제 정의                    |
|  2. 타겟 사용자                  |
|  3. 제안 해결책                  |
|  4. 핵심 기능 목록               |
|  5. UI/UX 요구사항               |
|  6. 기술 스택                    |
|  7. 마일스톤 및 일정             |
|  8. 성공 지표(KPI)               |
+----------------------------------+

PRD 작성의 핵심 전략

[전통적 사고]
"PRD를 완벽하게 쓰고 나서 개발을 시작해야 한다"

[AI 시대의 사고 전환]
1. 문서보다 상품에 집중
   -> 대화하며 아이디어를 다듬는 과정 자체가 PRD 작성
2. 완벽한 PRD는 필요 없다
   -> 클로드 컨텍스트에 기획 내용이 이미 들어있으므로
     더 빠르고 섬세한 PRD 생성 가능
3. 아이디어 -> 대화 -> 크롤링 -> ASCII 레이아웃 -> PRD
   -> 자연스러운 흐름으로 점진적 구체화

핵심 체크포인트

• 완벽한 PRD를 먼저 쓰는 것보다, 대화를 통해 점진적으로 구체화하는 것이 AI 시대의 방식
• 한 줄 아이디어 -> Playwright 리서치 -> ASCII 디자인 -> PRD 순서가 효율적
• 같은 채팅에서 진행하면 이전 대화 내용이 콘텍스트로 자동 활용됨
• PRD에는 문제 정의, 타겟 사용자, 제안 해결책, 핵심 기능, 기술 스택 등이 포함되어야 함
• "문서보다 상품에 집중"하는 마인드셋이 핵심

연습문제

문제 1: Playwright MCP 설정 (기본)

Q. 클로드 데스크톱에 Playwright MCP를 설정하기 위해 claude_desktop_config.json에 작성해야 하는 JSON 설정을 작성하고, 왜 Node.js가 필요한지 설명하시오.

{
    "mcpServers": {
        "playwright": {
            "command": "npx",
            "args": [
                "@playwright/mcp@latest"
            ]
        }
    }
}

문제 2: 아이디어 구체화 순서 (중급)

Q. 아래 작업들을 올바른 순서로 배열하고, 각 단계에서 생성되는 결과물을 설명하시오.

• PRD 작성
• ASCII 레이아웃으로 UI 디자인
• Playwright로 참고 사이트 크롤링
• 한 줄 아이디어 정리

문제 3: AI 시대의 PRD 작성 방식 (심화)

Q. 전통적인 PRD 작성 방식과 클로드를 활용한 PRD 작성 방식의 차이점을 3가지 이상 비교하고, "문서보다 상품에 집중하라"는 말의 의미를 실무 관점에서 설명하시오.

부록 A: 용어 사전

부록 B: 비교표

아이디어 구체화 도구 비교

콘텍스트 수집 방법 비교

클로드 데스크톱 vs 클로드 코드

부록 C: 참고 자료

• Pieter Levels의 노마드 리스트: nomads.com -- 이 장의 실습에서 참고한 디지털 노마드 도시 평가 사이트
• Playwright 공식 문서: playwright.dev -- Microsoft의 브라우저 자동화 프레임워크
• Playwright MCP 패키지: @playwright/mcp -- npm에서 설치 가능한 MCP 서버 패키지
• Node.js 설치: nodejs.org/ko/download -- Playwright MCP 실행에 필요한 Node.js 설치 페이지
• MCP (Model Context Protocol): modelcontextprotocol.io -- AI 모델 외부 도구 연결 표준 프로토콜
• 코드팩토리 GitHub: github.com/codefactory-co -- 저자의 예제 코드 저장소